<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>有人智造-工单汇总看板</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
  <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
  <style>
    body{
      /*background-color: #f5f7fa;*/
      font-size: 20px;
      background: linear-gradient(to bottom right, blue, pink);
      background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
    }
    h1{
      width: 30%;
      margin: 0 auto;
      color: white;
      background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
      linear-gradient(45deg, transparent 34px, #134194 0) left;
      background-size: 50% 100%;
      background-repeat: no-repeat;
      margin-bottom: 20px;
    }
    .return{
      position: fixed;
      top: 10px;
      left:10px;
      width: 50px;
      height: 50px;
    }
    .main{
      width: 100%;
      height: 700px;
      margin: 0 auto;
      /*background-color: #666aff;*/
    }
    .top{
      width: 68%;
      /*height: 40%;*/
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
      background: linear-gradient(to bottom right, white, blue);
      margin-bottom: 10px;
    }
    .top2{
      width: 30%;
      /*height: 40%;*/
      margin-left: 10px;
      background-color: #7bd4ce;
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
      margin-bottom: 10px;
    }
    h3{
      width: 100%;
      height: 30px;
      line-height: 30px;
      margin: 0 auto;
      color: white;
      background: linear-gradient(-45deg, transparent 14px, #134194 50px) right;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-bottom: 20px;
      padding-left: 20px;
      font-size: 20px;
    }
    .tableTop{
      width: 100%;
      height: 90%;
      /*display: flex;*/
      margin-top: -20px;
      /*background-color: #3f44ff;*/
    }
    .tableTop1{
      width: 100%;
      /*height: 50%;*/
      /*background-color: red;*/
      display: flex;
    }
    .tableTop2{
      width: 100%;
      /*height: 50%;*/
      /*background-color: green;*/
      display: flex;
    }
    .top1{
      width: 40%;
      /*height: 80%;*/
      margin:0 auto;
      border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
      box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
      background: linear-gradient(to bottom right, white, blue);
      border-radius: 50px;
      display: flex;
      margin-top: 15px;
    }
    .top11{
      width: 40%;
      /*height: 100%;*/
      border-radius: 50px 0 0 50px;
      /*background-color: red;*/
      text-align: center;
      color: white;
      line-height: 100px;
      font-size: 15px;
      background: linear-gradient(to bottom right, #caf2ff, #2bb9ba);
    }
    .top13{
      width: 60%;
      /*height: 100%;*/
      border-radius: 0 50px 50px 0;
      text-align: center;
      color: white;
      line-height: 50px;
      font-size: 15px;
      background: linear-gradient(to bottom right,#666aff, #7bd4ce);
    }
    .middle1{
      width: 100%;
      height: 40%;
      display: flex;
      /*background-color: white;*/
    }
    .middle2{
      width: 100%;
      height: 40%;
      display: flex;
      /*background-color: #2bb9ba;*/
      margin-top: 10px;
    }
    .middle11{
      width: 30%;
      /*height: 100%;*/
      margin: 0 auto;
      background-color: #7bd4ce;
    }
    .middle12{
      width: 30%;
      /*height: 100%;*/
      margin: 0 auto;
      background-color: #7bd4ce;
    }
    .middle13{
      width: 30%;
      /*height: 100%;*/
      margin: 0 auto;
      background-color: #7bd4ce;
    }
    .span1{
      display: inline-block;
      width: 200px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #c8dafe;
      border-radius: 20px;
      margin-bottom: 10px;
    }
    .container {
      max-width: 2500px;
      /*width: 1510px;*/
      /*margin: 0 auto;*/
      display: inline-block;
      /*background-color: red;*/
      height: 165px; /* 设置容器的高度 */
      overflow: auto; /* 启用垂直滚动 */
      /*margin-left: 70px;*/
      padding: 0;
      overflow-y: hidden;
      overflow-x: hidden;
      position: relative; /* 相对定位以容纳滚动内容 */
      /*display: flex;*/
      /*float: left;*/
    }
    .container1{
      width: 100%;
      /*width: 1800px;*/
      /*background-color: #666aff;*/
      position: absolute; /* 绝对定位 */
      top: 0; /* 初始位置为顶部 */
      /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
      animation-name: move;
      /*animation-duration: 800s;*/
      animation-timing-function: linear;
      /*animation-delay: 1s;*/
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode: forwards;
    }
    /* 滚动动画 */
    @keyframes move {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-100%);
      }
    }
    table th:nth-child(odd){
      background-color: #2bb9ba;
      color: white;
    }
    table th:nth-child(even){
      background-color:#134094;
      color: white;
    }
    table tr:nth-child(odd){
      background-color: #666aff;
      color: white;
    }

    .table1 tr th{
      padding: 0;
      text-align: center;
    }
    .table1 tr td{
      padding: 0;
    }
  </style>
</head>
<body>
<div style="width: 100%;margin:0 auto;" >
  <img src="/static/img/return.png" alt="返回总控台" class="return">
  <h1 style="text-align: center ">工单汇总看板</h1>
  <div class="main">
    <div style="width: 100%;display: flex;">
    <div class="top">
      <h3>待生产制令单数量统计</h3>
      <div class="tableTop">
        <div class="tableTop1">
            <div class="top1">
              <div class="top11">
                SMT待生产工单
              </div>
              <div class="top13">
                数量：{$smtData['count']} <br>
                单据数：{$smtData['count']}
              </div>
            </div>

            <div class="top1">
              <div class="top11">
                DIP待生产工单
              </div>
              <div class="top13">
                数量：{$dipData['count']} <br>
                单据数：{$dipData['count']}
              </div>
            </div>
              </div>
      <div class="tableTop2">
            <div class="top1">
              <div class="top11">
                总装待生产工单
              </div>
              <div class="top13">
                数量：{$zzData['count']} <br>
                单据数：{$zzData['count']}
              </div>
            </div>

              <div class="top1">
                <div class="top11">
                  今日总体不良清单
                </div>
                <div class="top13">
                  数量：{$Ng['SCRAP_QTY']} <br>
                  比例：{$Ng['proportion']}%
                </div>
              </div>
            </div>
      </div>
    </div>
    <div class="top2">
      <h3>今日不良清单</h3>
      <!--                表头和表体分离-->
      <div style="width: 100%;margin-top: -10px;margin-bottom: -15px">
        <table class="table table1">
          <tr style="text-align: center;">
            <th width="40px">序号</th>
            <th width="200px">制令单号</th>
            <th width="80px">总个数</th>
            <th width="80px">不良个数</th>
            <th width="80px">不良比例</th>
          </tr>
        </table>
      </div>
      <div class="{if $Ng['count']>=6}container{/if}" >
        <div class="{if $Ng['count']>=6}container1{/if}" style="animation-duration:{$Ng['count']}s;">
          <table class="table table1">
            {foreach $Ng['data'] as $k=>$v}
            <tr style="text-align: center;">
              <td width="40px">{$k+1}</td>
              <td width="200px">{$v['MO_DOC']}</td>
              <td width="80px">{$v['OUTPUT_QTY']}</td>
              <td width="80px">{$v['SCRAP_QTY']}</td>
              <td width="80px">{$v['proportion']}</td>
            </tr>
            {/foreach}
          </table>
        </div>
      </div>
    </div>
    </div>
    <div class="middle1">
       <div class="middle11">
         <h3>SMT今日待生产制令单</h3>
         <div style="display: flex;justify-content:space-between;margin: -10px 0 0 0;">
           <span class="span1">总个数:{$smtData['count']}</span>
           <span class="span1">型号数:{$smtData['count']}</span>
         </div>
         <!--                表头和表体分离-->
         <div style="width: 100%;margin-bottom: -15px">
           <table class="table table1">
             <tr style="text-align: center;">
              <th width="40px">序号</th>
              <th width="200px">制令单号</th>
              <th width="80px">状态</th>
              </tr>
           </table>
         </div>
         <div class="{if $smtData['count']>=6}container{/if}" >
           <div class="{if $smtData['count']>=6}container1{/if}" style="animation-duration:{$smtData['count']}s;">
             <table class="table table1">
           {foreach $smtData['data'] as $k=>$v}
           <tr style="text-align: center;">
             <td width="40px">{$k+1}</td>
             <td width="200px">{$v['MO_DOC']}</td>
             <td width="80px">{$v['STATUS']}</td>
           </tr>
           {/foreach}
             </table>
           </div>
         </div>
       </div>
      <div class="middle12">
        <h3>DIP今日待生产制令单</h3>
        <div style="display: flex;justify-content:space-between;margin: -10px 0 0 0;">
          <span class="span1">总个数:{$dipData['count']}</span>
          <span class="span1">型号数:{$dipData['count']}</span>
        </div>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;">
              <th width="40px">序号</th>
              <th width="200px">制令单号</th>
              <th width="80px">状态</th>
            </tr>
          </table>
        </div>
        <div class="{if $dipData['count']>=6}container{/if}" >
          <div class="{if $dipData['count']>=6}container1{/if}" style="animation-duration:{$dipData['count']}s;">
            <table class="table table1">
              {foreach $dipData['data'] as $k=>$v}
              <tr style="text-align: center">
                <td width="40px">{$k+1}</td>
                <td width="200px">{$v['MO_DOC']}</td>
                <td width="80px">{$v['STATUS']}</td>
              </tr>
              {/foreach}
            </table>
          </div>
        </div>
       </div>
      <div class="middle13">
        <h3>总装今日待生产制令单</h3>
        <div style="display: flex;justify-content:space-between;margin: -10px 0 0 0;">
          <span class="span1">总个数:{$zzData['count']}</span>
          <span class="span1">型号数:{$zzData['count']}</span>
        </div>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;">
              <th width="40px">序号</th>
              <th width="200px">制令单号</th>
              <th width="80px">状态</th>
            </tr>
          </table>
        </div>
        <div class="{if $zzData['count']>=6}container{/if}" >
          <div class="{if $zzData['count']>=6}container1{/if}" style="animation-duration:{$zzData['count']}s;">
            <table class="table table1">
              {foreach $zzData['data'] as $k=>$v}
              <tr style="text-align: center">
                <td width="40px">{$k+1}</td>
                <td width="200px">{$v['MO_DOC']}</td>
                <td width="80px">{$v['STATUS']}</td>
              </tr>
              {/foreach}
            </table>
          </div>
        </div>
       </div>
    </div>
    <div class="middle2">
      <div class="middle11">
        <h3>SMT今日已完成制令单</h3>
        <div style="display: flex;justify-content:space-between;margin: -10px 0 0 0;">
          <span class="span1">总个数:{$smtsData['count']}</span>
          <span class="span1">型号数:{$smtsData['count']}</span>
        </div>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;">
              <th width="40px">序号</th>
              <th width="200px">制令单号</th>
              <th width="80px">状态</th>
            </tr>
          </table>
        </div>
        <div class="{if $smtsData['count']>=6}container{/if}" >
          <div class="{if $smtsData['count']>=6}container1{/if}" style="animation-duration:{$smtsData['count']}s;">
            <table class="table table1">
              {foreach $smtsData['data'] as $k=>$v}
              <tr style="text-align: center;">
                <td width="40px">{$k+1}</td>
                <td width="200px">{$v['MO_DOC']}</td>
                <td width="80px">{$v['STATUS']}</td>
              </tr>
              {/foreach}
            </table>
          </div>
        </div>
      </div>
      <div class="middle12">
        <h3>DIP今日已完成制令单</h3>
        <div style="display: flex;justify-content:space-between;margin: -10px 0 0 0;">
          <span class="span1">总个数:{$dipsData['count']}</span>
          <span class="span1">型号数:{$dipsData['count']}</span>
        </div>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;">
              <th width="40px">序号</th>
              <th width="200px">制令单号</th>
              <th width="80px">状态</th>
            </tr>
          </table>
        </div>
        <div class="{if $dipsData['count']>=6}container{/if}" >
          <div class="{if $dipsData['count']>=6}container1{/if}" style="animation-duration:{$dipsData['count']}s;">
            <table class="table table1">
              {foreach $dipsData['data'] as $k=>$v}
              <tr style="text-align: center">
                <td width="40px">{$k+1}</td>
                <td width="200px">{$v['MO_DOC']}</td>
                <td width="80px">{$v['STATUS']}</td>
              </tr>
              {/foreach}
            </table>
          </div>
        </div>
      </div>
      <div class="middle13">
        <h3>总装今日已完成制令单</h3>
        <div style="display: flex;justify-content:space-between;margin: -10px 0 0 0;">
          <span class="span1">总个数:{$zzsData['count']}</span>
          <span class="span1">型号数:{$zzsData['count']}</span>
        </div>
        <!--                表头和表体分离-->
        <div style="width: 100%;margin-bottom: -15px">
          <table class="table table1">
            <tr style="text-align: center;">
              <th width="40px">序号</th>
              <th width="200px">制令单号</th>
              <th width="80px">状态</th>
            </tr>
          </table>
        </div>
        <div class="{if $zzsData['count']>=6}container{/if}" >
          <div class="{if $zzsData['count']>=6}container1{/if}" style="animation-duration:{$zzsData['count']}s;">
            <table class="table table1">
              {foreach $zzsData['data'] as $k=>$v}
              <tr style="text-align: center">
                <td width="40px">{$k+1}</td>
                <td width="200px">{$v['MO_DOC']}</td>
                <td width="80px">{$v['STATUS']}</td>
              </tr>
              {/foreach}
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">

    </div>

  </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var refreshInterval = setInterval(function() {
    location.reload(); // 刷新页面
  },20000)
  $(".return").click(function (){
    window.history.back();
  })
</script>
</html>